﻿@{
    Layout = "_share/_Layout.cshtml";
    ViewBag.Title = "钻孔测深";
}
<div style="text-align:center;height: 40px"><span>钻孔编号：</span><span id="holeIds" style="width:60%"></span><button id="btnShow" class="btn btn-primary">展示</button></div>
<div id="container" class="col-md-12" style="height: calc(100% - 40px); margin: 0;padding: 0; ">
</div>
<div id="dataContainer" class="col-md-6" style="display: none">
</div>

@section css
{
    <link href="Content/css/jquery.dataTables.css" rel="stylesheet" />
    <link href="Content/css/tracking3d.css" rel="stylesheet" />
    <link href="Content/css/dataTables.fixedHeader.min.css" rel="stylesheet" />
    <link href="Content/css/dataTables.scroller.min.css" rel="stylesheet" />
    <link href="Content/css/select2.css" rel="stylesheet" />
}
@section script
{
    <script src="Scripts/libs/jquery.mousewheel.js"></script>
    <script src="Scripts/libs/Three.js"></script>
    <script src="Scripts/libs/RequestAnimationFrame.js"></script>
    <script src="Scripts/libs/stats.min.js"></script>
    <script src="Scripts/libs/jsUtils.js"></script>
    <script src="Scripts/libs/dat.gui.min.js"></script>
    <script src="Scripts/libs/canvasjs.min.js"></script>
    <script src="Scripts/libs/jquery.dataTables.min.js"></script>
    <script src="Scripts/libs/dataTables.fixedHeader.min.js"></script>
    <script src="Scripts/libs/select2.js"></script>
    <script src="Scripts/libs/bootstrap.min.js"></script>
    <script src="Scripts/controls/TrackballControls.js"></script>
    <script src="Scripts/controls/FirstPersonControls.js"></script>
    <script src="Scripts/controls/OrbitControls.js"></script>
    <script src="Scripts/sim/sim.js"></script>
    <script src="Scripts/three-helper.js"></script>
    <script src="Content/fonts/optimer_regular.typeface.js"></script>
    <script>

        var yzdata = [];
        yzdata.push({ type: "line", dataPoints: [{ x: new Date(2012, 01, 1), y: 71, indexLabel: "", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 }] });
        var chart = new CanvasJS.Chart("container", {
            zoomEnabled: false,
            title: {
                text: "钻孔测深"
            },
            axisY: {
                title: "深度(米)"
            },
            axisX: {
                title: "时间(分钟)",
            },
            legend: {
                horizontalAlign: "center",
                verticalAlign: "top"
            },
            data: yzdata,  // random generator below
            click: function () {
                alert('1');
            }
        });
        $(function () {
            var pageSize = 1; //查找5天的数据。
            $("#holeIds").select2({
                placeholder: "请选择最多5个钻孔编号",
                maximumInputLength: 10,
                maximumSelectionSize: 5,
                multiple: true,
                ajax: {
                    dataType: 'jsonp',
                    quietMillis: 50,
                    //The url of the json service
                    url: "/GetHoleShenduIds",
                    //Our search term and what page we are on
                    data: function (term, page) {
                        return {
                            pageSize: pageSize,
                            pageNum: page,
                            searchTerm: term
                        };
                    },
                    results: function (data, page) {
                        var select2Results = [];
                        //                    var d = $.parseJSON(data);
                        var d = data;
                        var more = (page * pageSize) < d.total;
                        for (var i = 0; i < d.results.length; i++) {
                            var item = d.results[i];
                            var group = select2Results[item.Group];
                            if (!group) {
                                group = { text: item.group, children: [] };
                            }
                            for (var j = 0; j < item.options.length; j++) {
                                var option = item.options[j];
                                group.children.push({ id: option.id, text: option.text });
                            }

                            select2Results.push(group);
                        }

                        return {
                            results: select2Results, more: more
                        };
                    }
                },
                dropdownCssClass: "bigdrop",
                escapeMarkup: function (m) { return m; }
            });

            $("#btnShow").click(function () {

                yzdata.length = 0;

                var list = $("#holeIds").select2("val");
                if (!list && list.length == 0) return;
                $.getJSON("/GetHoleShenduData", { holeId: list }, function (result) {
                    for (key in result) {
                        var list = result[key];
                        if (!result[key].length) {
                            continue;
                        }
                        var yz = [];

                        var minTime = Date.parse(list[0].date);
                        for (var i = 0; i < list.length; i++) {
                            var v = list[i];
                            var time = new Date(Date.parse(v.date));
                            var diff = new Date(time - minTime) / 1000 / 60;
                            if (v.depth >= 0) {
                                yz.push({ x: diff, y: v.depth, name: time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDay() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() });
                            } else {
                                yz.push({ x: diff, y: 0, name: time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDay() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() });
                            }
                        }
                        yzdata.push(
                            {
                                type: "line",
                                toolTipContent: "编号：" + key + "  深度：{y}<br>" + "时间：{name}",
                                showInLegend: "true",
                                name: key,
                                dataPoints: yz,
                                click: showData,
                                data: list
                            });
                    }
                    //                    chart.options.width = 200;
                    chart.render();

                }).error(function (jqXHR, textStatus, errorThrown) {
                    console.log("error " + textStatus);
                    console.log("incoming Text " + jqXHR.responseText);
                });
            });

            var showData = function (e) {
                if ($("#dataContainer").is(":visible")) {
                    $("#container").attr('class', 'col-md-12');
                    $("#dataContainer").hide();
                } else {
                    $("#container").attr('class', 'col-md-6');
                    $("#dataContainer").show();
                }

                chart.render();
                var data = e.dataSeries.data;
                $("#dataContainer").empty();

                $("#dataContainer").append("<table class='display'  cellspacing='0' id='example'></table>");

                var dataSet = [];
                for (var i = 0; i < data.length; i++) {
                    var p = data[i];
                    dataSet.push([p.id, p.groupNum, p.date, p.depth.toFixed(2), p.sensorData.toFixed(0)]);
                }
                var height = $("#container").height() - 80;

                var table = $('#example').dataTable({
                    scrollX: true,
                    scrollY: height,
                    scrollCollapse: true,
                    "paging": false,
                    "data": dataSet,
                    "ordering": false,
                    "info": false,
                    "searching": false,
                    "dom": '<"top"i>rt<"bottom"flp><"clear">',

                    "columns": [
                        { "title": "钻孔编号" },
                        { "title": "班组编号" },
                        { "title": "时间" },
                        { "title": "深度(米)" },
                        { "title": "钻杆数" },
                    ],

                });
                $("#example_wrapper").css("width", $("#dataContainer").width());
            };
        });
    </script>
    
<script>
            window.onload = window.onresize = function () {
                chart.render();
            };
</script>
}